
<template>
  <div class="mtask-details">
    <div class="Mtask-main-list">
      <ul v-if="detail">
        <li>
          <div class="main-list-box">
            <div class="main-list-left">
							<span>
								<a>ID:</a>
								<a>{{detail.taskid}}</a>
								<!--<a>(剩余:{{detail.number}}单)</a>-->
							</span>
              <span v-if="mainType==='pay'">
								{{detail.goodsMoney}}元
							</span>
            </div>
            <div class="main-list-right">
							<span style="float: left;">
							 	<a><img src="static/imgs/qian.png" alt="" title=""/></a>
							 	<a>{{detail.serviceMoney}}</a>
							 </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 任务要点 -->
    <div class="task-con">
      <ul>
        <li>
          <div class="task-box">
						<span style="float: left;">
							<a class="task-img"><img src="static/imgs/a.png" alt="" title=""/></a>
							<a>任务要点</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>任务类型</a>
						</span>
            <span>
							<a class="color-red">{{mainType==='pay'?detail.taskkeyTypeStr:typeTOString()}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>搜索关键字</a>
						</span>
            <span>
							<a>{{detail.keyword}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>规格尺码</a>
						</span>
            <span>
							<a>{{detail.colorSize}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>订单留言</a>
						</span>
            <span>
							<a :title="detail.orderwords">{{detail.orderwords}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>评论要求</a>
						</span>
            <span>
							<a :title="detail.appoints">{{detail.appoints}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>是否假聊</a>
						</span>
            <span>
							<a>{{detail.chatNecessary===0?'否':'是'}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>默认签收</a>
						</span>
            <span>
							<a>{{detail.receiveDefault===0?'否':'是'}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>接单限制</a>
						</span>
            <span>
							<a :title="detail.rebuy">{{detail.rebuy}}</a>
						</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 卖家额外要求 -->
    <div class="extra-task">
      <div class="task-box-div">
        <div class="task-box">
          <a><img src="static/imgs/a.png" alt="" title="" /></a>
          <a>卖家额外要求:</a>
        </div>
      </div>
      <div class="task-box-t">
        <div class="task-box explains">{{detail.explains}}</div>
      </div>
    </div>
    <!-- 选择 -->
    <div class="task-select">
      <div class="task-box">
        <a>请选择账号</a>
        <a @click="meet">点击接取任务</a>
      </div>
    </div>
    <!-- VIP -->
    <div class="task-vip">
      开通vip
    </div>
    <!-- fixed -->
    <div class="fixed-nav">
      <index-footer></index-footer>
    </div>
  </div>
</template>

<script>
  import {taskService} from '#/service'
  import {mapGetters} from 'vuex'
  import IndexFooter from '@/components/base/IndexFooter'
  import { MessageBox,Toast} from 'mint-ui';
  export default {
    name: 'TaskDetails',
    data(){
      return {
        account:[],
        id:'',
        detail:{},
        mainType:""
      }
    },
    created(){
      this.id=this.$route.params.id;
      this.mainType=this.$route.query.mainType
      if(this.user.taobaoList){
        this.account=this.user.taobaoList.slice(0)
      }
      if(!this.id){
        this.$router.push({
          name:'task'
        })
      }else if(!this.mainType){
        this.$router.push({
          mission:'mission'
        })
      } else{
        this.query()
      }
    },
    methods:{
      meet(){
        MessageBox({
          title: '温馨提示',
          message: '温馨提示\n' +
          `请于60分钟内完成任务,超时平台会自动取消任务并扣取${this.mainType==='pay'?0.5:0.2}金!若于15分钟内主动撤单,将不会扣取佣金, 15分钟后主动撤单,扣取${this.mainType==='pay'?0.2:0.1}金`,
          showCancelButton: true
        }).then(async (action) => {
          console.info(action)
          if(action==='confirm'){
            taskService.receiveTask({
              params:{
                taskkeyId:this.id
              },
              success:()=>{
                Toast({
                  message: '操作成功',
                });
                setTimeout(()=>{
                  this.$router.push({
                    name:'orderDetails',

                  })
                },800)
              }
            });
          }

        });;
      },
      query(){
        let {id}=this
        taskService.taskDetail({
          params:{
            taskkeyid:id,
            type:this.mainType
          },
          success:(res)=>{
            this.detail=res.data
          }
        })
      },
      typeTOString(){
        if(!this.detail.taskkeyType) return ''
        let arrStr=(this.detail.taskkeyType+'').split('');
        let str='';
        arrStr.map((item)=>{
          str+=this.switchStr(item);
        })
        return str
      },
      switchStr(str){
        switch (str) {
          case "1":
            return '浏览'
          case "2":
            return "收藏商品"
          case "3":
            return "关注店铺任务"
          case "4":
            return "加购"
          default:
            return ""
        }
      }
    },
    computed:{
      ...mapGetters([
        'user'
      ]),
      typeStr(){

      }
    },
    components: {
      IndexFooter
    },

  }
</script>

<style>
  html,body{
    background: #f5f5f5;
  }
  .mtask-details {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 0.5rem;
  }

  .Mtask-main-list {
    width: 100%;
    height: auto;
    overflow: hidden;

  }

  .Mtask-main-list ul li {
    width: 100%;
    height: 0.86rem;
    float: left;
    margin-bottom: 0.1rem;
    background: white;
  }

  .Mtask-main-list ul li:last-child {
    margin-bottom: none;
  }

  .main-list-box {
    width: 92%;
    margin: 0 auto;
  }

  .main-list-left {
    width: 100%;
    float: left;
    margin-top: 0.15rem;
    height: auto;
    border-bottom: 1px dashed #626262;
  }

  .main-list-left span {
    display: block;
    float: left;
    color: #626262;
    font-size: 0.12rem;
  }

  .main-list-left span a {
    display: inline-block;
    float: left;
  }

  .main-list-left span:last-child {
    float: right;
  }

  .main-list-right {
    width: 100%;
    height: auto;
    float: left;
    margin-top: 0.15rem;
  }

  .main-list-right span {
    display: block;
    float: left;
  }

  .main-list-right span a {
    display: inline-block;
    float: left;
  }

  .main-list-right span:first-child a {
    width: 0.16rem;
    height: 0.18rem;
    color: #faad45;
    font-size: 0.18rem;
    margin-right: 0.05rem;
  }

  .main-list-right span:first-child a img {
    display: block;
    width: 100%;
  }

  .task-con {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .task-con ul li {
    width: 100%;
    height: 0.36rem;
    line-height: 0.36rem;
    float: left;
    background: white;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .task-box {
    width: 92%;
    margin: 0 auto;
  }
  .explains{
    margin-bottom: 15px;
  }
  .task-box span {
    display: block;
    float: left;
  }

  .task-box span:last-child {
    float: right;
  }

  .task-box span a {
    display: inline-block;
    float: left;
    color: #333;
    font-size: 0.13rem;
  }

  .task-box span:last-child .color-red {
    color: red;
  }

  .task-box span .task-img {
    width: 0.2rem;
    height: 0.2rem;
    margin: 0.07rem 0.05rem 0 0;
  }

  .task-box span .task-img img {
    display: block;
    width: 100%;
  }

  .task-box span:last-child {
    float: right;
  }

  .task-box span:last-child a {
    color: #4097FF;
  }

  .extra-task {
    width: 100%;
    height: 0.64rem;
    margin-top: 0.1rem;
    background: white;
  }

  .task-box-div {
    width: 100%;
    height: 0.37rem;
    line-height: 0.37rem;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .task-box-div a {
    display: inline-block;
    float: left;
    color: #333;
    font-size: 0.13rem;
  }

  .task-box-div a img {
    width: 0.2rem;
    height: 0.2rem;
    display: block;
    margin: 0.1rem 0.05rem 0 0;
  }

  .task-box-t {
    width: 100%;
    height: 0.26rem;
    line-height: 0.26rem;
    color: #4097FF;
    font-size: 0.12rem;
  }
  .task-select{
    width: 100%;
    height: 0.53rem;
    margin-top: 0.1rem;
    background: white;
  }
  .task-select a{
    display: inline-block;
    float: left;
    width: 1.55rem;
    height: 0.3rem;
    line-height: 0.3rem;
    background: #4097ff;
    text-align: center;
    color: white;
    font-size: 0.12rem;
    border-radius: 0.05rem;
    margin: 0.1rem 0.3rem 0 0;
    cursor: pointer;
  }
  .task-select a:last-child{
    margin-right: inherit;
  }
  .task-vip{
    width: 100%;
    height: 0.36rem;
    line-height: 0.36rem;
    text-align: center;
    background: white;
    margin-top: 0.1rem;
    color: #4097FF;
    font-size: 0.12rem;
    margin-bottom: 0.1rem;
  }
</style>
